.popover {
  @apply -absolute -w-max -hidden;
}
.popover.show {
  @apply -block;
}
.popover-heading {
  @apply -bg-surface -h-10 -gap-4 -flex -items-center -pl-3 -pr-2 -justify-between -rounded-t-[inherit] -relative -z-[1];
}
.popover-title {
  @apply -flex-auto -font-bold;
}
.popover-content {
  @apply -p-3 -relative -z-[1];
}
.popover-arrow {
  @apply -z-0;
}
.has-heading > .popover-arrow.arrow-up,
.has-heading > .popover-arrow.arrow-top {
  @apply -bg-surface;
}
.popover > .btn-close {
  @apply -absolute -right-2 -top-2.5 -z-[2];
}

.btn-close + .popover-content {
  @apply -pr-12;
}

.btn.with-popover-show {
  @apply -shadow-inner;
}
.with-popover-show[data-pop-placement="top"] > .caret {
  @apply -rotate-180;
}
.with-popover-show[data-pop-placement="left"] > .caret {
  @apply -rotate-90;
}
.with-popover-show[data-pop-placement="right"] > .caret {
  @apply --rotate-90;
}
